//------------------------------- 查询所有学员，循环展示 ------------------------------
function renderStudent() {
  axios.get('/student/list').then(({ data: res }) => {
    let { code, data } = res;
    if (code === 0) {
      let trs = '';
      data.forEach(item => {
        trs += `
        <tr>
          <th scope="row">${item.id}</th>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.sex}</td>
          <td>${item.group}</td>
          <td>${item.phone}</td>
          <td>${item.salary}</td>
          <td>${item.truesalary}</td>
          <td>${item.province} ${item.city} ${item.county}</td>
          <td>
            <button type="button" class="btn btn-primary btn-sm">修改</button>
            <button type="button" class="btn btn-danger btn-sm">删除</button>
          </td>
        </tr>
        `;
      });
      $('tbody').html(trs);
    }
  });
}
renderStudent();


// -------------------------------------- 删除学员 ------------------------------------------
$('tbody').on('click', '.del', function () {
    if (!confirm('你确定要删除吗？')) return;
    let id = $(this).data('id');
    axios.delete('/student/delete', { params: { id } }).then(({ data: res }) => {
      if (res.code === 0) {
        toastr.success(res.message); // 提示
        renderStudent(); // 更新页面数据
      }
    })
  })

// --------------------------------------- 省市县联动 --------------------------------------
// 页面加载完毕，马上获取全部的省
axios.get('/geo/province').then(({ data: res }) => {
    let str = '<option value="" selected>--省--</option>';
    res.forEach(item => {
      str += `<option value="${item}">${item}</option>`;
    });
    $('select[name=province]').html(str);
  });
  
  // 省切换的时候，获取对应的市
  $('select[name=province]').on('change', function () {
    // 重置县
    $('select[name=county]').html('<option value="" selected>--县--</option>');
  
    // 获取到当前选择的省
    let pname = $(this).val(); // 对于下拉框来说，$('select').val() 找的并不是 select标签的value属性，找的是 option是value属性
  
    // 判断，如果选择了空的省，重置后面的市和县
    if (pname === '') {
      return $('select[name=city]').html('<option value="" selected>--市--</option>'); // 左右结构，右侧先执行
    }
  
    // 获取对应的市，并展示到对应的下拉框中
    axios.get('/geo/city', { params: { pname } }).then(({ data: res }) => {
      let str = '<option value="" selected>--市--</option>';
      res.forEach(item => {
        str += `<option value="${item}">${item}</option>`;
      });
      $('select[name=city]').html(str);
    });
  })
  
  
  // 市切换的时候，获取对应的县
  $('select[name=city]').on('change', function () {
    // 获取到当前选择的省
    let pname = $(this).parent().prev().children().eq(0).val();
    let cname = $(this).val(); // 对于下拉框来说，$('select').val() 找的并不是 select标签的value属性，找的是 option是value属性
  
    // 判断，如果市是空值，重置后面的县
    if (cname === '') return $('select[name=county]').html('<option value="" selected>--县--</option>');
  
    // 获取对应的市，并展示到对应的下拉框中
    axios.get('/geo/county', { params: { pname, cname } }).then(({ data: res }) => {
      let str = '<option value="" selected>--县--</option>';
      res.forEach(item => {
        str += `<option value="${item}">${item}</option>`;
      });
      $('select[name=county]').html(str);
    });
  })
  
  // ---------------------------------------- 添加学员 ----------------------------------------
  // 1. 研究一下，弹框是怎么回事。https://v5.bootcss.com/docs/components/modal/
  // 2. 省市县联动效果
  // 3. 表单验证
  
  // 4. 表单提交，完成添加